<template>
  <div class="box-card">
    <!-- 面包屑 -->
    <el-breadcrumb class="app-breadcrumb" separator="/">
      <el-breadcrumb-item v-for="item in tabList" :key="item.name" :to="{ path: item.path }">
        
        {{ item.label }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>

</template>

<script setup>
import { useList } from '../../store/index'
import { storeToRefs } from 'pinia';

const store = useList()
const { tabList } = storeToRefs(store)
</script>

<style lang="less" scoped>

// .box-card{
//   // position: absolute;
//   width: 100%;
//   height: 40px;
//   left: 200px;
//   top: 65px;
//   background-color: white;
// }


// .el-breadcrumb {
//   line-height: 40px;
//   margin-left: 40px;

// }

.app-breadcrumb.el-breadcrumb {
    display: inline-block;
    font-size: 15px;
    line-height: 50px;
    margin-left: 0px;
    width: 100%;
    background-color: white;
    padding-left: 15px;
  
    .no-redirect {
      margin-left: 5px;
      color: #97a8be;
      cursor: text;
    }
    
  }
//  :deep(.el-breadcrumb__inner) {
//       // margin-left: 15px;
//     }
</style>